<script setup lang="ts" name="SystemPost">
import {defineAsyncComponent, onMounted, reactive, ref, toRefs} from "vue";
import { notify } from "@/utils/element";
import { getDictTypeList,deleteTypeById } from "@/api/system/dict";
import { useRouter } from "vue-router";
const MenuEdit = defineAsyncComponent(() => import('@/views/system/dict/components/dict-edit.vue'));
onMounted (() => {
    getPostData()
})

async function getPostData(){
  const { pageNum, pageSize } = state.page;
  await getDictTypeList(state.query, pageNum, pageSize).then((res) => {
    state.tableList = res.data;
    //@ts-ignore
    state.page.total = res.total;
  });

  console.log('tableList', state.tableList);
}

 //点击查询
    function handleQuery() {
        //将页码设置为第一页
        state.page.pageNum = 1;
        getPostData()
    }


// right 内容开始
const state = reactive({
  loading: false,
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  } as PageType,
  query: {
    dictName: ''
  } as unknown as SysDictDataQuery,
  dataTree: [],
  tableList: [] as SysDictDataType [],
});

const router = useRouter()
async function getDictType(dictType: string){
  // 跳转到字典类型页面
  router.replace({name: 'DictType', query: {dictType: dictType, date: new Date().getTime(),}});
}

function handleAdd(){
  editRef.value.open('add', '新增');
}
function handleEdit(row: SysPostQuery){
  //console.log('handleEdit', row)
  editRef.value.open('edit','编辑',row);
}
async function handleDelete(id: string){
  console.log('handleDelete',id);
  try {
    state.loading = true;
    await deleteTypeById(id);
    //提示成功
    notify('删除成功！', {type: 'success'});
    //刷新列表
    getPostData()
  } catch (error) {
  } finally {
    state.loading = false;

  }

}
const { loading, page, query, tableList } = { ...toRefs(state)}; // 解构赋值
const tableListRef = ref();
const editRef = ref();
</script>

<template>
  <div class="layout-padding">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="always">
          <el-form inline :model="query">
            <el-form-item label="字典名称">
              <el-input v-model="query.dictName" maxlength="30" placeholder="请输入字典名称" clearable />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQuery()" icon="ele-Search" type="primary">查询</el-button>
              <el-button @click="handleAdd()" icon="ele-Plus" type="success">新增字典</el-button>
            </el-form-item>
          </el-form>

          <el-table
            class="w100"
            ref="tableListRef"
            v-loading="loading"
            :data="tableList"
            row-key="menuId"
            border
            stripe
          >
          <el-table-column type="index" label="字典编号" align="center" width="100px"/>
            <el-table-column prop="dictName" label="字典名称" header-align="center" align="center">
                <template #default="{row}">
                    <span class="ml10">{{ row.dictName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="dictType" label="字典类型" align="center">
              <template #default="{row}">
                <el-link type="primary" @click="getDictType(row.dictType)">{{ row.dictType }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="状态" align="center">
              <template #default="{row}">
                    <el-tag effect="plain" :type="row.status == '0' ? 'primary' :  'warning'">{{ row.status == '0' ? '正常' : '停用' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" show-overflow-tooltip/>
            <el-table-column prop="remark" label="备注" header-align="center" align="center" show-overflow-tooltip/>
            <el-table-column label="操作" align="center" width="240px">
              <template #default="{row}">
                <el-button @click.stop="handleEdit(row)" icon="ele-Edit" type="warning" link>修改</el-button>
                <el-popconfirm @confirm="handleDelete(row.dictId)" width="auto" :title="`确定永久删除【${row.dictName}】吗?`">
                  <template #reference>
                    <el-button @click.stop icon="ele-Delete" type="danger" link>删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <m-page :page="state.page" @pageChange="getPostData"/>
    <!-- 新增、编辑弹出组件 -->
    <MenuEdit ref="editRef" @refresh="getPostData"/>
  </div>
</template>

<style scoped>

</style>
